<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>登录</title>
    <link rel="stylesheet" href="../../lib/weui/weui.min.css">
    <link rel="stylesheet" href="../../font/iconfont.css">
    <link rel="stylesheet" href="../../css/style.css">
    <style>
        .logo {
            margin-top: 60px;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .logo img {
            width: 60px;
        }

        .submit {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin: 30px auto 0 auto;
            background: #eaeaea;
            text-align: center;
            line-height: 100px;
            color: white;
        }

        .submit.active {
            background: -webkit-linear-gradient(left top, #00d6ff, #008aff);
            /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(bottom right, #00d6ff, #008aff);
            /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(bottom right, #00d6ff, #008aff);
            /* Firefox 3.6 - 15 */
            background: linear-gradient(to bottom right, #00d6ff, #008aff);
            /* 标准的语法 */
        }

        .other-operate {
            position: fixed;
            bottom: 20px;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .other-operate .item {
            padding: 0 50px;
            font-size: 12px;
            font-weight: bold;
            display: relative;
        }
        .up {
            position: relative;
            top: -20px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div :class="{up: isUp}">
            <div class="logo">
                <img src="../../image/logo.png">
            </div>
            <div class="form">
                <div class="form-item">
                    <div class="label"></div>
                    <div class="input">
                        <input type="text" v-model="formData.principal" @focus="focus(0)" @blur="blur(0)"
                            @input="fieldChange" :placeholder="principalPlaceHolder">
                    </div>
                </div>
                <div class="form-item">
                    <div class="label"></div>
                    <div class="input">
                        <input type="password" v-model="formData.password" @focus="focus(1)" @blur="blur(1)"
                            @input="fieldChange" :placeholder="passwordPlaceHolder">
                    </div>
                </div>
                <div class="submit" :class="{active: isActive}" @click="submit">
                    <div class="btn"><span class="wjxfont icon-array-right-copy" style="font-size: 30px;"></span></div>
                </div>
            </div>
        </div>
        <div class="other-operate">
            <div class="item forget-password btn">忘记密码</div>
            <div class="item register btn" @click="register">用户注册</div>
        </div>

        <!-- modal层 -->
        <!-- 加载进度条 -->
        <div :class="{hide: hideLoadingToast}">
            <div class="weui-mask_transparent"></div>
            <div class="weui-toast">
                <i class="weui-loading weui-icon_toast"></i>
                <p class="weui-toast__content">数据加载中</p>
            </div>
        </div>
        <!-- 错误提示警告框 -->
        <div :class="{hide: hideErrorAlert}">
            <div class="weui-mask"></div>
            <div class="weui-dialog">
                <div class="weui-dialog__hd"><strong class="weui-dialog__title">错误</strong></div>
                <div class="weui-dialog__bd">用户名或者密码错误</div>
                <div class="weui-dialog__ft">
                    <a @click="hideAlert" class="weui-dialog__btn weui-dialog__btn_primary">确定</a>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<!-- lib -->
<script src="../../lib/vue/vue.min.js"></script>
<script src="../../lib/zepto/zepto.min.js"></script>

<!-- util -->
<script src="../../util/mm.js"></script>

<script src="../../script/constants.js"></script>

<!-- service -->
<script src="../../script/service/user-service.js"></script>

<script src="./login.js"></script>